<template>
    <div class="counter">
        <h3>当前的值是： {{num}}</h3>
        <select v-model.number="value">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="inc"> + </button>
        <button @click="dec"> - </button>
        <button @click="oddInc"> odd + </button>
        <button @click="asyncInc"> async 1s + </button>
        <button @click="reset">重置为0</button>
    </div>
</template>

<script>
export default {
    name: 'Counter',
    data() {
        return {
            num: 0,
            value: 1
        }
    },
    methods: {
        inc() {
            this.num += this.value;
        },
        dec() {
            this.num -= this.value;
        },
        oddInc() {
            if(this.num % 2) {
                this.num += this.value;
            }
        },
        asyncInc() {
            setTimeout(() => {
                this.num += this.value;
            }, 1000)
        },
        reset() {
            this.num = 0;
            this.value = 1;
        }
    }
}
</script>

<style scoped>
button {
    margin-left: 5px;
}
</style>